<template>
	<view style="overflow: hidden;padding-top: 10rpx;">
		<view class="reset-password-row"><input class="reset-password-input" placeholder-class="reset-password-input-placeholder" placeholder="手机号/账号" type="number" v-model="phone" /></view>
		<view class="reset-password-row">
			<input class="reset-password-input" maxlength="6" placeholder-class="reset-password-input-placeholder" placeholder="验证码" type="number" v-model="identifyCode" />
			<view class="reset-password-send" @tap="getCode" :style="{ color: getCodeBtnColor }">{{ getCodeText }}</view>
		</view>
		<view class="reset-password-row"><input :password="true" class="reset-password-input" placeholder-class="reset-password-input-placeholder" placeholder="新密码" type="number" v-model="passwd" /></view>
		<view class="reset-btn" @tap="resetPassword">重置密码</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			phone: '',
			passwd: '',
			getCodeText: '获取验证码',
			getCodeBtnColor: '#333',
			getCodeisWaiting: false,
			timer: null,
			identifyCode: ''
		};
	},
	methods: {
		validPhone() {
			if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
				return false;
			}
			return true;
		},
		getCode() {
			uni.hideKeyboard();
			if (this.getCodeisWaiting) {
				return;
			}
			if (!this.validPhone()) {
				Tools.showError('请填写正确手机号码');
				return false;
			}
			this.getCodeText = '发送中...';
			this.getCodeisWaiting = true;
			this.getCodeBtnColor = '#aaa';
			this.$get(this.$api.checkPhoneAccount, { phone: this.phone }, res => {
				if (res.data.account > 0) {
					this.$get(
						this.$api.sendCode,
						{ phone: this.phone },
						res => {
							if (res.code === 1) {
								uni.showToast({ title: '验证码已发送', icon: 'none' });
								this.setTimer();
							} else {
								uni.showToast({ title: res.message, icon: 'none' });
							}
						},
						() => {
							this.sentBtnReset();
						}
					);
				} else {
					uni.showToast({
						icon: 'none',
						title: '当前手机号尚未注册账号'
					});
					this.sentBtnReset();
				}
			});
		},
		sentBtnReset() {
			this.getCodeText = '获取验证码';
			this.getCodeBtnColor = '#333';
			this.getCodeisWaiting = false;
		},
		setTimer() {
			let holdTime = 60;
			this.getCodeText = '重新获取(60)';
			this.timer = setInterval(() => {
				if (holdTime <= 0) {
					this.sentBtnReset();
					clearInterval(this.timer);
					return;
				}
				this.getCodeText = '重新获取(' + holdTime + ')';
				holdTime--;
			}, 1000);
		},
		resetPassword() {
			uni.hideKeyboard();
			if (!this.validPhone()) {
				Tools.showError('请填写正确手机号码');
				return false;
			}

			const CryptoJS = require('crypto-js');
			const password = CryptoJS.AES.encrypt(CryptoJS.MD5(this.passwd).toString(), CryptoJS.enc.Utf8.parse('sgg45747ss223411'), { mode: CryptoJS.mode.ECB }).toString();
			uni.showLoading({
				title: '正在校验账户安全'
			});
			this.$post(
				this.$api.forgetPassword,
				{ phone: this.phone, password, identifyCode: this.identifyCode },
				res => {
					if (res.code === 1) {
						uni.showToast({
							title: '修改成功！'
						});
						Route.redirectTo({
							url: '/pages/login/index'
						});
					} else {
						Tools.showError(res.msg);
					}
				},
				null,
				() => {
					uni.hideLoading();
				}
			);
		}
	}
};
</script>

<style>
.reset-password-row {
	margin-top: 30rpx;
	height: 90rpx;
	background: #fff;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}
.reset-password-input {
	flex: 1;
	height: 90rpx;
	padding: 0 20rpx;
}
.reset-password-input-placeholder {
	color: #999;
	font-size: 26rpx;
}
.reset-password-send {
	padding: 0 30rpx;
	font-size: 25rpx;
}
.reset-btn {
	height: 90rpx;
	margin: 50rpx 30rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d10000;
	color: #fff;
	font-size: 30rpx;
	border-radius: 12rpx;
}
</style>
